<template>
  <div class="main">
    <!-- 导航栏 -->
    <mt-header fixed title="首页" style="background: #f49b00"></mt-header>
    <div style="height: 40px"></div>
    <!-- 轮播图 -->
    <div class="bjys">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="../assets/swipe/01.webp" /></van-swipe-item>
        <van-swipe-item><img src="../assets/swipe/02.webp" /></van-swipe-item>
        <van-swipe-item><img src="../assets/swipe/03.webp" /></van-swipe-item>
      </van-swipe>

      <van-grid square>
        <van-grid-item icon="shield-o" to="/insurance" text="宠物保险" />
        <van-grid-item icon="home-o" to="/adopt" text="宠物领养" />
        <van-grid-item icon="shop-o" to="/shop" text="附近店家" />
        <van-grid-item icon="friends-o" to="" text="我的宠物" @click="myadopt" />
      </van-grid>

      <!-- 明星宠物 -->
      <h3>明星宠物</h3>
      <van-divider :style="{ borderColor: '#aaa',margin:'10px 0', padding: '0 10px' }" />
      <div class="pet">
        <img src="../assets/swipe/11.webp" alt="" />
        <img src="../assets/swipe/12.jpg" alt="" />
        <img src="../assets/swipe/13.webp" alt="" />
        <img src="../assets/swipe/14.jpg" alt="" />
        <img src="../assets/swipe/15.jpg" alt="" />
        <img src="../assets/swipe/16.jpg" alt="" />
        <img src="../assets/swipe/17.jpg" alt="" />
      </div>

      <div>
        <h3>萌宠视频</h3>
        <van-divider :style="{ borderColor: '#aaa', padding: '0 10px' }" />
        <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>1</van-swipe-item>
        </van-swipe> -->
        <div class="body1" v-for="item in video" :key="item.vid" @click="details(item.vid)">
          <img :src="`${item.pic}`" />
          <div class="body1-1">
            <p>{{item.title}}</p>
            <p style="color:#aaa;font-size:12px;">发布时间：{{time(item.time)}}</p>
          </div>
        </div>
      </div>
      <div style="height: 47px"></div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      activeName: "a",
      video: [],  // 保存视频列表
    };
  },
  methods: {
    // 我的宠物
    myadopt() {
      if (this.$store.state.username) {
        this.$router.push("/myadopt");
      } else {
        Toast("未登录");
      }
    },
    // 点击卡片跳转到详情页方法
    details(id) {
      this.$router.push(`/video/details?vid=${id}`);
    },

    // 发送请求，加载视频列表
    getdata(){
      this.axios.get("/video").then((res) => {
        // console.log(res);
        this.video = res.data.data;
      });
    },

    // 转换时间函数
    time(time) {
      time = this.dayjs(time).format("YYYY-MM-DD");
      return time
    }
  },
  mounted(){
    this.getdata()
  },

};
</script>

<style lang="scss" scoped>
h3 {
  font-size: 14px;
  margin-left: 10px;
}
// .bjys {
//   // background-color: rgb(230, 158, 49);
//   position: fixed;
//   top: 0;
//   right: 0;
//   left: 0;
//   bottom: 0;
// }
.my-swipe {
  height: 30vh;
}
.van-swipe-item img {
  width: 100%;
}

.main {
  background-color: #fbf7f7;
}
.body1 {
  display: flex;
  margin: 10px;
  border-radius: 5px;
  background-color:  white;
}
.body1 img {
  width: 25%;
  height: 100%;
  margin: 5px;
}
.body1-1 {
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  p {
    font-size: 15px;
    color: #494747;
    margin: 5px;
  }
}

.pet {
  display: flex;
  overflow: auto;
  img {
    width: 100px;
    margin: 3px;
    border-radius: 14px;
  }
}
::v-deep .mint-header-title{
  font-size: 15px;
}
</style>